import React, { useRef, useState } from 'react'

//! 函数组件更新是需要重新执行函数整体的!!! 所以定时器清楚不掉

//todo 总结: 如果将来某个数据, 需要有组件重兴渲染的效果 => usestate()
//todo 但是如果仅仅知识需要记录一个数据, useRef()
//todo 共同点都是具有缓存的作用

export default function App() {
  // let timer = null 每次组件更新都会执行这行代码 timer重置了

  // * useRef 能缓存数据的作用, 再次执行这行时, 能拿到之前的数据
  let timer = useRef(null)
  // let {timer, setTimer} = useState(-1)

  // 数据变了之后页面要变化就需要使用usestate
  // const [timer, setTimer] = useState(-1)
  const [timerstamp, setTimeStamp] = useState(+new Date())

  const start = () => {
    timer.current = setInterval(() => {
      // console.log('过了1秒')
      setTimeStamp(+new Date())
    }, 1000)
  }
  const stop = () => {
    clearInterval(timer.current)
  }
  return (
    <div>
      <h1>useRef的其他使用-{timerstamp}</h1>
      <button onClick={start}>开启定时器</button>
      <button onClick={stop}>关闭定时器</button>
    </div>
  )
}
